<template>
    <div>
        <h2>readonly和shallowReadonly</h2>
        <h3>state：{{state2}}</h3>
        <button @click="update">更新数据</button>
    </div>
</template>
<script lang="ts">
import { defineComponent, reactive, readonly, shallowReadonly } from 'vue'
export default defineComponent({
    name: 'App',
    setup() {
        const state = reactive({
            name: 'zuozuo',
            age: 20,
            car: {
                type: '轿车',
                color: 'yellow',
            },
        })
        // 只读的数据---深度的只读
        // const state1 = readonly(state)

        // shallowReadonly只读-浅只读
        const state2 = shallowReadonly(state)
        const update = () => {
            console.log('更新')
            // state1.name += '111'
            // state1.car.color = 'red'
            // state2.name += '11'
            state2.car.color = 'red'
        }
        return {
            state2,
            update,
        }
    },
})
</script>
<style>
</style>